<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/chat_room.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
    <div class="navbar_div">
        <ul class="navbar_left">
            <li><a href="/index">首页</a></li>
            <li><a href="/gpt_chat">gpt助手</a></li>
            <li><a href="/chat_room">聊天室</a></li>
        </ul>
        <ul class="navbar_right">
            <li><a href="javascript:;" id="isLogin">登录</a></li>
        </ul>
    </div>
</div>

<div class="main">
    <p class="top"></p>
    <div class="container">
        <div class="head">
            <div class="title">在线聊天室</div>
            <div class="outline">在线人数: 1</div>
        </div>
        <div class="chatBox">
            <div class="message frnd_message">
                <p>欢迎进入聊天室！！！</p>
            </div>
        </div>

        <div class="end">
            <p style="height: 5%;"></p>
            <div class="end_cont">
                <p style="height: 5%;"></p>
                <textarea cols="30" rows="3" class="intext" id="message-input"></textarea>
                <button class="but" onclick="sendMessage()">发送</button>
            </div>
        </div>
    </div>
</div>


<script>
    allMessage();
    // 加载历史聊天记录
    function allMessage(){
        $.ajax({
            url:"chats",
            type:"get",
            success:function (msg){
                for (const msg1 of msg.data){
                    const pElement = document.createElement('p');
                    pElement.textContent = msg1.content;
                    // 创建 <div> 标签
                    const divElement = document.createElement('div');
                    divElement.classList.add('message', 'frnd_message');
                    // 将 <p> 标签添加到 <div> 标签中
                    divElement.appendChild(pElement);
                    // 将整个 <div> 标签添加到文档中的某个元素中
                    const container = document.getElementsByClassName('chatBox')[0];
                    container.appendChild(divElement);
                }
            }
        })
    }

    function sendMessage() {
        const messageInput = document.getElementById('message-input');

        const message = messageInput.value.trim();
        if (message) {
            scrollToBottom()
            messageInput.value = '';
            // console.log("我：" + message); // 显示自己发送的消息
            websocketSend(message)
            //  添加 我发的消息 到对话框中
            const pElement = document.createElement('p');
            pElement.textContent = message;
            // 创建 <div> 标签
            const divElement = document.createElement('div');
            divElement.classList.add('message', 'my_message');
            // 将 <p> 标签添加到 <div> 标签中
            divElement.appendChild(pElement);
            // 将整个 <div> 标签添加到文档中的某个元素中
            const container = document.getElementsByClassName('chatBox')[0];
            container.appendChild(divElement);
        }
    }


    let websock = null
    let messageCallback = null
    let errorCallback = null
    let wsUrl = "ws://127.0.0.1:8080/ws";

    // 接收ws后端返回的数据
    function websocketonmessage(e) {
        scrollToBottom()
        const originalData = e.data;
        const trimmedData = originalData.slice(1, -1);
        // console.log(e.data, "接收后端返回的数据");
        // messageCallback(JSON.parse(e.data))
        //  添加 对方消息 到对话框中
        const pElement = document.createElement('p');
        pElement.textContent = trimmedData;
        // 创建 <div> 标签
        const divElement = document.createElement('div');
        divElement.classList.add('message', 'frnd_message');
        // 将 <p> 标签添加到 <div> 标签中
        divElement.appendChild(pElement);
        // 将整个 <div> 标签添加到文档中的某个元素中
        const container = document.getElementsByClassName('chatBox')[0];
        container.appendChild(divElement);
    }

    /**
     * 发起websocket连接
     * @param {Object} agentData 需要向后台传递的参数数据
     */
    function websocketSend(agentData) {
        // 加延迟是为了尽量让ws连接状态变为OPEN
        setTimeout(() => {
            // 添加状态判断，当为OPEN时，发送消息
            if (websock.readyState === websock.OPEN) { // websock.OPEN = 1
                // 发给后端的数据需要字符串化
                websock.send(JSON.stringify(agentData))
            }
            if (websock.readyState === websock.CLOSED) { // websock.CLOSED = 3
                console.log('websock.readyState=3')
                ElMessage.error('ws连接异常,请稍候重试')
                errorCallback()
            }
        }, 500)
    }

    // 关闭ws连接
    function websocketclose(e) {
        // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
        // e.code !== 1000  表示非正常关闭。
        if (e && e.code !== 1000) {
            ElMessage.error('ws连接关闭')
        }
    }
    // 建立ws连接
    function websocketOpen(e) {
        console.log('ws连接成功', e)
    }

    // 初始化weosocket
    function initWebSocket() {
        if (typeof (WebSocket) === 'undefined') {
            ElMessage.error('您的浏览器不支持WebSocket,无法获取数据')
            return false
        }

        //建立链接
        websock = new WebSocket(wsUrl)

        websock.onmessage = function (e) {
            websocketonmessage(e)
        }
        websock.onopen = function () {
            websocketOpen()
        }
        websock.onerror = function () {
            ElMessage.error('ws连接异常,请稍候重试')
            errorCallback()
        }
        websock.onclose = function (e) {
            websocketclose(e)
        }
    }

    /**
     * 发起websocket请求函数
     * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
     * @param {function} errCallback ws连接错误的回调函数
     */
    function sendWebsocket(successCallback, errCallback) {
        initWebSocket()
        messageCallback = successCallback
        errorCallback = errCallback
    }

    /**
     * 关闭websocket函数
     */
    function closeWebsocket() {
        console.log("关闭链接")
        if (websock) {
            console.log("关闭连接");
            websock.close() // 关闭websocket
            websock.onclose() // 关闭websocket
        }
    }

    initWebSocket()


    //  限制 输入框最大输入内容
    const inputElement = document.getElementById('message-input');
    const maxLength = 200; // 设置限定的最大字数

    inputElement.addEventListener('input', function () {
        const currentLength = inputElement.value.length;
        if (currentLength > maxLength) {
            inputElement.value = inputElement.value.slice(0, maxLength); // 截取输入的内容，只保留限定字数内的部分
        }
    });


    // 将滚动条滑动到底部
    function scrollToBottom() {
        var chatBox = document.querySelector('.chatBox');
        chatBox.scrollTop = chatBox.scrollHeight ;
    }




</script>
</body>
</html>